<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }

        .graphic_sharing_box {
            background-color: #fff;
        }

        .textarea_box {
            min-height: 8.25rem;
            padding: 1rem 0.75rem;
        }
        /*图片列表*/

        .imgs_box {
            background-image: none!important;
        }

        .img_list_box {
            position: relative;
            background-image: none!important;
        }

        .img_list_box:after {
            content: "";
            height: 1px;
            width: calc(100% - 0.75rem);
            position: absolute;
            bottom: 0;
            background-color: #e6e6e6;
            right: 0;
        }

        .img_box img {
            border-radius: 0.2rem;
        }

        .img_box{
          position: relative;
        }
        .img_box .remove_img_btn{
          position: absolute;
          right: 0.2rem;
          top: 0.2rem;
          background: #f23030;
          width: 0.7rem;
          height: 0.7rem;
          line-height: 0.7rem;
          text-align: center;
          border-radius: 50%;
          color: #fff;
        }
        .not_show {
            display: none;
        }
        /*定位*/

        .localtion {
            display: flex;
            align-items: center;
            padding: 0.75rem;
        }

        .localtion img {
            width: 0.75rem;
            margin-right: 0.75rem;
        }

        .localtion span {
            font-size: 0.7rem;
            color: #333;
        }

        .localtion span.address {
            flex: 1;
        }
        /*遮罩*/

        .cover {
            position: fixed;
            background-color: rgba(0, 0, 0, .6);
            width: 100vw;
            height: 100vh;
            top: 0;
            display: none;
        }
        /*弹出框样式*/

        .success_toast {
            background-color: #fff;
            width: 10rem;
            height: 10rem;
            position: absolute;
            top: calc(50% - 1.125rem);
            left: 50%;
            transform: translateX(-50%) translateY(calc(-50% - 1.125rem));
            border-radius: 0.3rem;
            text-align: center;
        }

        .success_toast img {
            width: 2.5rem;
            margin: auto;
            margin-top: 2.625rem;
            margin-bottom: 1.5rem;
        }

        .success_toast span {
            color: #333;
            font-size: 0.9rem;
        }
    </style>
</head>

<body>
    <div class="graphic_sharing_box">
        <textarea name="name" rows="8" cols="80" placeholder="来分享您此刻的想法吧..." class="textarea_box"></textarea>
        <ul class="aui-list aui-media-list imgs_box">
            <li class="aui-list-item img_list_box">
                <div class="aui-list-item-inner">
                    <div class="aui-row aui-row-padded">
                        <div v-for="(src,index) in path_list" class="aui-col-xs-3 img_box">
                            <!-- <img src="../../image/four/test.jpg" /> -->
                            <div class="img" :style="'background:url('+src+') center/cover no-repeat;'"></div>
                            <div class="remove_img_btn"  @click="remove_img(index)">×</div>
                        </div>
                        <div class="aui-col-xs-3" @click="add_imgs()" :class="{not_show:show}">
                            <img src="../../image/four/add_img.png" />
                        </div>
                    </div>
                </div>
            </li>
        </ul>


        <div class="localtion" onclick="open_new_win('four','位置选择','定位','完成')">
            <img src="../../image/four/address.png" alt="">
            <span class="address">所在位置</span>
            <span class="aui-iconfont aui-icon-right"></span>
        </div>
    </div>


    <!-- 遮罩 -->
    <div class="cover">
        <dis class="success_toast">
            <img src="../../image/four/success.png" alt="">
            <span>发布成功</span>
        </dis>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript">
    // 定义数组储存图片路径
    var pics = {};
    // 定义发布动态的地址
    var address = '';
    apiready = function() {

        // 设置状态栏文字颜色
        api.setStatusBarStyle({
            style: 'dark'
        });


        api.addEventListener({
            name: 'send_address'
        }, function(ret, err){
            if( ret ){
                //  console.log("选择地址成功后的数据---"+ JSON.stringify( ret ) );
                 if(ret.value){
                  //  alert(ret.value.address);
                  $('.address').html(ret.value.address);
                  address = ret.value.address;
                }
            }else{
                 alert( JSON.stringify( err ) );
            }
        });



        // 实例化vue
        var imgs_box = new Vue({
            el: '.graphic_sharing_box',
            data: {
                path_list: [],
                show:false
            },

            methods: {

                // 添加图片
                add_imgs: function() {
                  var $_this = this;
                    var UIMediaScanner = api.require('UIMediaScanner');
                    UIMediaScanner.open({
                        type: 'picture',
                        column: 3,
                        classify: false,
                        max: 9-$_this.path_list.length,
                        sort: {
                            key: 'time',
                            order: 'desc'
                        },
                        texts: {
                            stateText: '已选择*',
                            cancelText: '取消',
                            finishText: '完成'
                        },
                        styles: {
                            bg: '#f7f7f7',
                            mark: {
                                icon: '',
                                position: 'top_right',
                                size: 20
                            },
                            nav: {
                                bg: '#f7f7f7',
                                stateColor: '#000',
                                stateSize: 18,
                                cancelBg: 'rgba(0,0,0,0)',
                                cancelColor: '#999',
                                cancelSize: 16,
                                finishBg: 'rgba(0,0,0,0)',
                                finishColor: '#ff0036',
                                finishSize: 16
                            }
                        },
                        exchange: true,
                        rotation: true
                    }, function(ret) {
                        if (ret) {
                            if (ret.list) {
                              $_this.img_num = ret.list.length;
                                  for (var i = 0; i < ret.list.length; i++) {
                                      $_this.path_list.push(ret.list[i].path);
                                      pics["pic"+i+""]=ret.list[i].path;
                                  }
                                $_this.$nextTick(function() {
                                   $('.img').height($('.img').width())

                                   if ($_this.path_list.length >= 9) {
                                       $_this.show = true;
                                   } else {
                                       $_this.show = false;
                                   }
                                })
                            } else {
                                console.log('未选择图片');
                            }
                        }
                    });

                },
                // 删除当前图片
                remove_img: function(index) {
                    var $_this = this;
                    $_this.path_list.splice(index, 1);

                    if ($_this.path_list.length >= 9) {
                        $_this.show = true;
                    } else {
                        $_this.show = false;
                    }
                }

            }
        })


    };


    // 添加遮罩和弹窗
    function add_cover() {
        $('.cover').show();
        setTimeout(function() {
            $('.cover').hide();
        }, 2000)
    }


    // 打开对应的窗口
    function open_new_win(index, title, type, right_txt) {
        api.openWin({
            name: 'four_' + index + '_header' + index,
            url: 'four_headers/four_' + index + '_header.html',
            pageParam: {
                title: title,
                type: type,
                right_txt: right_txt
            }
        });

    }

    // 发布图文朋友圈
    function graphic_sharing() {
      api.showProgress({
          style: 'default',
          animationType: 'fade',
          title: '发布中...',
          text: '先喝杯茶...',
          modal: false
      });


      // console.log('pic--- '+JSON.stringify(pics));
        // 获取输入的内容
        var input_txt = $('.textarea_box').val();

        api.ajax({
            url: window.Url.Community_addDynamic,
            method: 'post',
            data: {
                values: {
                    token: $api.getStorage('token'),
                    content: input_txt,

                    type: 1,
                    address: address
                },
                files: pics
            }
        }, function(ret, err) {
            if (ret) {
                console.log('图文分享发布成功的返回数据---'+JSON.stringify(ret));
                if(ret.re==1){
                  api.hideProgress();


                  api.execScript({
                      name: 'four_index',
                      frameName: 'friend_list',
                      script: 'window.location.reload();'
                  });



                  // 执行win的添加移除遮罩方法
                  api.execScript({
                      script: 'add_move(1);'
                  });

                  setTimeout(function(){
                    api.closeWin({});
                  },2000);
                }
            } else {
                alert(JSON.stringify(err));
            }
        });
    }
</script>

</html>
